<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div class="main">
    <!-- <parklist :getParkCode="parkChange"> </parklist> -->
    <div class="top">
      <!-- 化工行业万元能耗园区排名 -->
      <div class="top-first">
        <div class="top-title">化工园区万元能耗园区排名</div>
        <div class="top-sel" style="padding-left:30px">
          <el-select class="select1" v-model="parkRankValue" placeholder="请选择" @change="changeParkRank">
            <el-option v-for="item in parkRank" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <span style="margin-left:10px">吨标煤/万元</span>
          <div v-if="topOneShow === 1" style="color: #909399; margin-top: 130px;margin-left: 130px;"> 暂无数据</div>
        </div>
        <div id="annular1" style="width: 100%;height:320px;padding:0 30px;"></div>
      </div>
      <!-- 浙江省化工产业2021年累计总能消耗 上二-->
      <div class="top-two">
        <div class="top-title">化工园区{{year}}年累计总能消耗</div>
        <div id="annular2" style="width:100%;height:390px"></div>
        <div v-if="topTwoData === 1" style="color: #909399; margin-top: -200px;margin-left: 150px;"> 暂无数据</div>
      </div>
      <!-- 化工行业万元能耗产业排名 -->
      <div class="top-first">
        <div class="top-title">化工园区万元能耗产业排名</div>
        <div class="top-sel" style="padding-left:30px">
          <el-select class="select1" v-model="industryRankValue" placeholder="请选择" @change="changeIndustryRank">
            <el-option v-for="item in industryRank" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <span style="margin-left:10px">吨标煤/万元</span>
        </div>
        <div id="annular3" style="width: 100%;height:320px;padding:0 30px;"></div>
        <div v-if="showData === 1" style="    color: #909399;margin-top: -200px;margin-left: 150px;"> 暂无数据</div>
      </div>
    </div>
    <div class="bottom">
      <!-- 园区能源用能额度分析 -->
      <div class="bottom-first">
        <div class="bottom-title">园区能源用能额度分析</div>
        <!-- <div class="bottom-sel"> -->
        <div id="annular5" style="width: 100%;height:440px;padding:0 30px;"> </div>
        <div v-if="bottomOneShow === 1" style="color: #909399; margin-top: -330px;margin-left: 150px;"> 暂无数据</div>
      </div>
      <!-- 浙江省化工产业月度能耗趋势 -->
      <div class="bottom-two">
        <div class="bottom-title-two">化工园区月度能耗趋势</div>
        <div id="annular4" style="width:100%;height:440px"></div>
        <div v-if="bottomTwoData === 1" style="color: #909399;margin-top: -330px;margin-left: 150px;"> 暂无数据</div>
      </div>
      <!-- 行业主要产品单位产品能耗 -->
      <div class="bottom-first">
        <div class="bottom-title">化工园区主要产能单位产品能耗</div>
        <div class="bottom-sel">
          <!-- <el-select class="select" v-model="energyConsumptionValue" placeholder="请选择" @change="changeEnergyConsumption">
            <el-option v-for="item in energyConsumption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select> -->
          <el-cascader
            v-model="energyConsumptionValue"
            placeholder="请选择"
            :options="energyConsumption"
            :props="{ value: 'code', label: 'name' }"
            @change="changeEnergyConsumption">
          </el-cascader>
        </div>
        <div class="bottom-tab">
          <el-table :data="tableData2" max-height="387px" :header-cell-style="{ background: '#F3F4F7',color:'#333333'}" style="width: 100%;padding-top: 10px;">
            <el-table-column prop="name" label="产品名称" show-overflow-tooltip min-width="78">
            </el-table-column>
            <el-table-column prop="consumption" show-overflow-tooltip label="单位产品能耗" align="center" width="105">
            </el-table-column>
            <el-table-column prop="nationalStandard" show-overflow-tooltip label="国家标准" align="center" min-width="78">
            </el-table-column>
            <el-table-column prop="IndustryStandard" show-overflow-tooltip label="行业标准" align="center" min-width="78">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import parklist from '@/components/parklist'
const echarts = require('echarts')
export default {
  name: 'energyConsumption',
  data () {
    return {
      topOneShow: 0,
      showData: 0,
      topTwoData: 0,
      bottomOneShow: 0,
      bottomTwoData: 0,
      parkCode: 'jdgx',
      year: '2021',
      parkRankValue: '0', // 增加值
      industryRankValue: '0', // 增加值
      quotaAnalysisValue: null,
      energyConsumptionValue: [],
      parkRank: [
        {
          label: '增加值',
          value: '0'
        },
        {
          label: '产值',
          value: '1'
        }
      ],
      industryRank: [
        {
          label: '增加值',
          value: '0'
        },
        {
          label: '产值',
          value: '1'
        }
      ],
      bottomTwoXData: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ],
      quotaAnalysis: [],
      energyConsumption: [],
      option1Data: [],
      optionYData: [],
      option1XData: [],
      option2Data: [],
      option3Data: [],
      option3XData: [],
      option4Data: [],
      option5XData: [],
      option51Data: [],
      option52Data: [],
      option5PartData: [],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      myChart1: {},
      myChart2: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      tableData1: [],
      tableData2: []
    }
  },
  components: {
    parklist
  },
  // 调用
  mounted () {
    this.renderMyChart1()
    this.renderMyChart2()
    this.renderMyChart3()
    this.renderMyChart4()
    this.renderMyChart5()

    // this.getIndustriesData()
    this.getParkInfoCityCode()
    this.parkChange(this.$route.query.data)
    // this.getEnergyConsumption();
    window.onresize = () => {
      this.myChart1.resize()
      this.myChart2.resize()
      this.myChart3.resize()
      this.myChart4.resize()
      this.myChart5.resize()
    }
  },
  methods: {
    parkChange (parkCode) {
      this.parkCode = parkCode
      // this.getEnergyConsumption()
      this.getIndustriesData()
    },
    numFormat (num) {
      var parts = num.toString().split('.')
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      return parts.join('.')
    },
    getEnergyConsumptionValue (value) {
      if (value && value.length > 0) {
        this.energyConsumptionValue.push(value[0].code)
        this.getEnergyConsumptionValue(value[0].children)
      }
    },
    getIndustriesData () {
      this.$http
        .post(`/home/chemical/emsGovIndustries/getEmsGovIndustriesByCode`, {})
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            // let arr = []
            // this.res.data.forEach((item) => {
            //   arr.push({
            //     value: item.code,
            //     label: item.name
            //   })
            // })
            this.energyConsumption = res.data
            this.getEnergyConsumptionValue(this.energyConsumption)
            this.getEnergyConsumption()
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    getParkInfoCityCode () {
      this.$http
        .post(`/home/chemical/parkInfo/getParkInfoCityCode`, {})
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            let arr = []
            res.data.forEach((item) => {
              arr.push({
                value: item.cityCode,
                label: item.cityName
              })
            })
            arr.unshift({
              value: null,
              label: '浙江省'
            })
            this.quotaAnalysis = arr
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    getEnergyConsumption () {
      let industry = this.energyConsumptionValue[(this.energyConsumptionValue.length - 1)]
      this.$http
        .post(`/home/chemical/energyConsumption/getEnergyConsumptionYearsOld`, {
          region: this.quotaAnalysisValue,
          areaSumType: this.parkRankValue,
          industrySumType: this.industryRankValue,
          industry: industry,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            if (res.data.emsGovEnergyQuotasList) {
              let quotasArr = []
              res.data.emsGovEnergyQuotasList.forEach((item) => {
                quotasArr.push({
                  name: item.parkName,
                  amount: item.usedAmount,
                  proportion: item.usedProportion + '%'
                })
              })
              this.tableData1 = quotasArr
            }

            if (res.data.emsGovProductConsumsListOld) {
              let productArr = []
              res.data.emsGovProductConsumsListOld.forEach((item) => {
                productArr.push({
                  name: item.industriesName,
                  consumption: item.energyValue,
                  nationalStandard: item.nationalStandard,
                  IndustryStandard: item.industryStandard
                })
              })
              this.tableData2 = productArr
            }

            //  上一
            if (res.data.emsGovAreaConsums && res.data.emsGovAreaConsums.length > 0) {
              this.option1.yAxis.data = []
              // 将第一个echart图得series属性定义成常量
              this.option1.series = []
              // 定义y轴
              this.option1.yAxis.data = res.data.emsGovAreaConsums[0].years
              res.data.emsGovAreaConsums.forEach((item, index) => {
                this.option1.series.push({
                  name: '',
                  zlevel: 1,
                  data: '',
                  type: 'bar',
                  // realtimeSort: true,
                  legendHoverLink: false,
                  barGap: 0.1,
                  min: 0,
                  // max: 100,
                  // label: {
                  //   show: true,
                  //   position: [0, "0px"],
                  //   color: "#555",
                  //   fontSize: 12,
                  //   offset: [0, 0],
                  //   // formatter: function (a) {
                  //   //   return `${a.name}`;
                  //   // },
                  // },
                  barWidth: '20px'
                })
                this.option1.series[index].name = item.name[0]
                this.option1.series[index].data = item.value
                // this.option1.series.push(option1Series);
                // this.option1XData = item.value
              })
              this.myChart1.setOption(this.option1, true)
              this.topOneShow = 0
              // 值
              // this.option1Data = res.data.emsGovAreaConsums[1];
              // // 改动：增加optionYData  年份
              // this.optionYData = res.data.emsGovAreaConsums[2];
              // // 园区名称
              // this.option1XData = res.data.emsGovAreaConsums[0];
            } else {
              this.option1.yAxis.data = []
              this.option1.series = []
              this.option1Data = []
              this.optionYData = []
              this.option1XData = []
              this.topOneShow = 1
              this.myChart1.setOption(this.option1, true)
            }

            // 上二
            if (res.data.emsGovYearConsumsOld && res.data.emsGovYearConsumsOld.length > 0) {
              this.option2Data = []
              let yearConsumsArr = []
              res.data.emsGovYearConsumsOld.forEach((item) => {
                let yearConsums = {
                  name: item.mediumName,
                  value: item.energyValue,
                  medium: item.medium
                }
                yearConsumsArr.push(yearConsums)
                this.topTwoData = 0
              })
              this.option2Data = yearConsumsArr
            } else {
              // 当没有数据时，控制中间的tec不显示
              this.option2Data = []
              this.topTwoData = 1
            }
            //  上三
            if (res.data.emsGovIndustryConsums && res.data.emsGovIndustryConsums.length > 0) {
              this.option3Data = res.data.emsGovIndustryConsums[1]
              this.option3XData = res.data.emsGovIndustryConsums[0]
              this.showData = 0
            } else {
              this.option3Data = res.data.emsGovIndustryConsums[1]
              this.option3XData = res.data.emsGovIndustryConsums[0]
              this.showData = 1
            }

            // 下二
            if (res.data.emsGovMonthConsumsOld && res.data.emsGovMonthConsumsOld.length > 0) {
              this.bottomTwoXData = [
                '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
              ]
              this.option4.series = []
              let monthEnergyType = []
              this.option2Data.forEach((yearEnergy) => {
                let series = {
                  name: yearEnergy.name,
                  type: 'bar',
                  stack: 'total',
                  emphasis: {
                    focus: 'series'
                  },
                  data: []
                }
                res.data.emsGovMonthConsumsOld.forEach((monthEnergy) => {
                  if (yearEnergy.name === monthEnergy.key) {
                    series.data = monthEnergy.value.map(item => {
                      return item.energyValue
                    })
                    monthEnergyType.push(monthEnergy.key)
                  }
                })
                this.option4.series.push(series)
              })
              res.data.emsGovMonthConsumsOld.forEach((monthEnergy) => {
                if (monthEnergyType.indexOf(monthEnergy.key) === -1) {
                  let energyValue = monthEnergy.value.map(item => {
                    return item.energyValue
                  })
                  let series = {
                    name: monthEnergy.key,
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                      focus: 'series'
                    },
                    data: energyValue
                  }
                  this.option4.series.push(series)
                }
              })
              this.bottomTwoData = 0
              this.myChart4.setOption(this.option4, true)
            } else {
              this.bottomTwoXData = []
              this.bottomTwoData = 1
              this.option4.series = []
              this.option4.xAxis[0].data = []
              this.myChart4.setOption(this.option4, true)
            }

            //  下一
            if (res.data.monthEmsGovEnergyQuotas && res.data.monthEmsGovEnergyQuotas.length > 0) {
              this.option5.series = []

              this.option5.xAxis.data =
                res.data.monthEmsGovEnergyQuotas[0].months
              var arr = 0
              res.data.monthEmsGovEnergyQuotas.forEach((item, index) => {
                this.option5.series.push(
                  {
                    // companyName: "",
                    name: '已用额度',
                    type: 'bar',
                    data: '',
                    stack: '',
                    barGap: '-100%'
                    // z: "1",
                  },
                  {
                    // companyName: "",
                    name: '未用额度',
                    type: 'bar',
                    data: '',
                    stack: '',
                    barGap: 0.1
                  }
                )
                this.option5.series[arr].name = item.name[0] + '已用额度'
                this.option5.series[arr].data = item.value
                this.option5.series[arr].stack = item.name[0]

                arr += 1
                this.option5.series[arr].name = item.name[0] + '未用额度'
                this.option5.series[arr].data = item.usedPlannedValue.map(
                  (item1, index1) => {
                    let num = Number(item1) - Number(item.value[index1])
                    return String(num)
                  }
                )
                this.option5.series[arr].stack = item.name[0]
                arr += 1
              })
              this.bottomOneShow = 0
              this.myChart5.setOption(this.option5, true)
              // this.option51Data = res.data.monthEmsGovEnergyQuotas[1];
              // this.option52Data = res.data.monthEmsGovEnergyQuotas[3];
              // // x轴坐标
              // this.option5XData = res.data.monthEmsGovEnergyQuotas[2];
              // this.option5PartData = res.data.monthEmsGovEnergyQuotas[0];
            } else {
              this.option5.series = []

              this.option5.xAxis.data = []
              this.option5XData = []
              this.option51Data = []
              this.option52Data = []
              this.option5PartData = []
              this.bottomOneShow = 1
              this.myChart5.setOption(this.option5, true)
            }
            this.year = res.data.years
            // this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            // this.renderMyChart4()
            // this.renderMyChart5()
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    // 化工行业万元能耗园区排名渲染(上一)
    renderMyChart1 () {
      this.myChart1 = ''
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      // 化工行业万元能耗园区排名
      this.option1 = {
        grid: {
          left: '15%',
          top: '9%',
          bottom: '10%'
        },
        xAxis: {
          show: true,
          min: 0
        },
        yAxis: {
          show: true,
          inverse: true,
          type: 'category',
          animationDuration: 300,
          animationDurationUpdate: 300,
          axisLine: true,
          // 改动：将option1XData改为optionYData
          data: '',
          axisLabel: {
            show: true
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: '3%',
          type: 'scroll'
        },
        series: [
          // {
          //   name: "",
          //   zlevel: 1,
          //   data: "",
          //   type: "bar",
          //   realtimeSort: true,
          //   legendHoverLink: false,
          //   barGap: 0,
          //   min: 0,
          //   // max: 100,
          //   label: {
          //     show: true,
          //     position: [0, "0px"],
          //     color: "#555",
          //     fontSize: 12,
          //     offset: [0, 0],
          //     formatter: function (a) {
          //       return `${a.name}`
          //     },
          //   },
          //   barWidth: "10px",
          //   backgroundStyle: {
          //     color: "rgba(207, 207, 207, 1)",
          //   },
          // },
          // {
          //   name: '201年',
          //   type: 'bar',
          //   data:this.option1XData
          // },
          // {
          //   // 追加数字显示
          //   zlevel: 2,
          //   data: "",
          //   type: "bar",
          //   realtimeSort: true,
          //   min: 0,
          //   label: {
          //     show: true,
          //     position: "right",
          //     // formatter: '{@value}%',
          //   },
          //   barWidth: "10px",
          //   backgroundStyle: {
          //     color: "rgba(207, 207, 207, 1)",
          //   },
          // },
        ],
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart1.setOption(this.option1)
    },
    // 累计总能消耗渲染   上二
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('annular2'))
      let arr = []
      let total = this.option2Data.reduce(
        (acc, current) => acc + current.value,
        0
      )
      this.option2Data.forEach((item) => {
        arr.push({
          value: item.value,
          medium: item.medium,
          name:
            item.name +
            ' ' +
            this.numFormat(item.value) +
            ' ' +
            ((item.value / total) * 100).toFixed(0) +
            '%'
        })
      })

      // this.option2Data = arr
      // 浙江省化工产业2021年累计总能消耗
      this.option2 = {
        color: ['#FF6B00', '#FFC000', '#70AD47', '#1492FF', '#99CBF9'],
        // title: {
        //   show: true,
        //   text: '浙江省化工产业' + this.year + '年累计总能消耗', // 主标题
        //   left: 'center',
        //   top: '20px',
        //   z: 0,
        //   zlevel: 100,
        //   textStyle: {
        //     // 设置主标题的 样式
        //     textAlign: 'left',
        //     fontSize: 18
        //   }
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        // legend: {
        //   top: '73%',
        //   // left: 'center',
        //   itemGap: 25,
        //   itemWidth: 15,
        //   // selectedMode: false,
        //   formatter: function (name) {
        //     return name
        //   }
        // },
        legend: {
          top: '86%',
          orient: 'horizontal',
          left: '3%',
          right: '3%',
          type: 'scroll',
          // formatter: [
          //   '{a|' + name + '}',
          //   '{b|这段文本采用样式b}'
          // ].join(' '),
          formatter: function (name) {
            let arr = name.split(' ')
            let part1 = arr[0] + ' ' + arr[1]
            let part2 = arr[2]
            let richText = [
              '{a|' + part1 + '}' +
              ' {b|' + part2 + '}'
            ]
            return richText
          },
          textStyle: {
            rich: {
              a: {
              },
              b: {
                fontWeight: 'bold'
              }
            }
          }
        },
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '36%',
            style: {
              text: this.numFormat(total),
              textAlign: 'center',
              fill: '#000',
              width: 30,
              height: 30,
              fontSize: 20,
              color: '#4d4f5c'
            }
          },
          {
            type: 'text',
            left: 'center',
            top: '42%',
            style: {
              text: 'tce',
              textAlign: 'center',
              fill: '#000',
              width: 30,
              height: 30,
              fontSize: 14
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '65%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            detail: {
              show: false
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: false
            },
            data: arr
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart2.setOption(this.option2)
      let that = this
      this.myChart2.off('click')
      this.myChart2.on('click', function (param) {
        if (param.data) {
          that.changeMedium(param.data.name)
        } else {
          that.changeMediumAll('All')
        }
      })
    },
    // 化工行业万元能耗产业排名渲染
    renderMyChart3 () {
      this.myChart3 = echarts.init(document.getElementById('annular3'))

      // 化工行业万元能耗产业排名
      this.option3 = {
        color: ['#2690F3'],
        grid: {
          left: '10%',
          top: '3%',
          bottom: '10%'
        },
        xAxis: {
          show: true,
          min: 0
        },
        yAxis: {
          inverse: true,
          show: true,
          type: 'category',
          axisLine: true,
          data: this.option3XData
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '{b}：{c}'
        },
        series: [
          {
            data: this.option3Data,
            type: 'bar',
            min: 0,
            barWidth: '10px',
            backgroundStyle: {
              color: 'rgba(207, 207, 207, 1)'
            },
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
              formatter: '{c}'
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart3.setOption(this.option3)
    },
    // 月度能耗趋势渲染   下二
    renderMyChart4 () {
      this.myChart4 = echarts.init(document.getElementById('annular4'))
      // 浙江省化工产业月度能耗趋势
      this.option4 = {
        color: ['#FF6B00', '#FFC000', '#70AD47', '#1492FF', '#99CBF9'],
        // title: {
        //   text: '浙江省化工产业月度能耗趋势',
        //   left: 'center',
        //   top: '20px',
        //   textStyle: {
        //     // 设置主标题的 样式
        //     textAlign: 'left',
        //     fontSize: 18
        //   }
        // },
        // legend: {
        //   top: '10px',
        //   itemWidth: 12,
        //   itemHeight: 12,
        //   itemGap: 30,
        //   data: this.bottomTwoLegendData
        //   // left: 'center',

        //   // selectedMode: false,
        //   // formatter: function (name) {
        //   //   return name
        //   // },
        // },
        legend: {
          top: '7px',
          orient: 'horizontal',
          left: '3%',
          right: '3%',
          type: 'scroll'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '15%',
          containLabel: true
        },
        xAxis: [
          {
            axisLine: { show: false },
            axisTick: { show: false },
            type: 'category',
            axisLabel: { interval: 0, rotate: 30 },
            data: this.bottomTwoXData
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          },
          {
            type: 'value',
            min: 0
          }
        ],
        series: []
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart4.setOption(this.option4)
    },
    // 园区能源用能额度分析(下一)
    renderMyChart5 () {
      this.myChart5 = echarts.init(document.getElementById('annular5'))
      // 园区能源用能额度分析
      this.option5 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: '3%',
          type: 'scroll',
          top: '7px'
        },
        // legend: {
        //   data: [],
        //   top: "10px",
        // itemWidth: 12,
        // itemHeight: 12,
        // itemGap: 30,
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          data: [],
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { interval: 0, rotate: 30 }
        },

        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '已用额度',
            type: 'bar',
            companyName: '',
            //  barGap: "-100%",
            stack: '',
            barGap: 0.1,
            // stack: "额度",
            // barGap: '-99%',
            // barWidth:20,
            // emphasis: {
            //   focus: "series",
            // },
            data: ''
          },
          {
            name: '未用额度',
            type: 'bar',
            companyName: '',
            //  barWidth:20,
            // stack: "额度",
            stack: '',
            barGap: '-100%',
            // z: "1",
            // emphasis: {
            //   focus: "series",
            // },
            data: ''
          }
        ]
        // label: {
        //   show: true,
        //   position: "top",
        //   valueAnimation: true,
        //   formatter: "{c0}",
        // },
      }
      // 使用刚指定的配置项和数据显示图表。
      this.myChart5.setOption(this.option5)
      // this.getEnergyConsumption()
    },
    // 表格合计行计算
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        const values = data.map((item) => item[column.property])
        let sum = 0
        values.forEach(function (item, index) {
          if (item == null) {
            item = 0
          }
          if (typeof item === 'string' && item.indexOf('%') > 0) {
            item = Number(item.split('%')[0])
          }
          var aaa = Number(item)
          if (!isNaN(aaa)) {
            sum = sum + Number(item)
          } else {
            sum = null
          }
        })
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 1) {
          sums[index] = sum + '万'
          return
        }
        if (index === 2) {
          sums[index] = sum + '%'
          // return
        }
      })
      return sums
    },
    // 化工行业万元能耗园区排名选项(上一)
    changeParkRank () {
      this.option1.yAxis.data = []
      this.option1.series = []
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovAreaConsums`, {
          areaSumType: this.parkRankValue,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            if (res.data.length > 0) {
              this.topOneShow = 0
            } else {
              this.topOneShow = 1
            }

            this.option1.series = []
            res.data.forEach((item, index) => {
              this.option1.yAxis.data = item.years
              this.option1.series.push({
                name: '',
                zlevel: 1,
                data: '',
                type: 'bar',
                // realtimeSort: true,
                legendHoverLink: false,
                barGap: 0.1,
                min: 0,
                // max: 100,
                // label: {
                //   show: true,
                //   position: [0, "0px"],
                //   color: "#555",
                //   fontSize: 12,
                //   offset: [0, 0],
                //   // formatter: function (a) {
                //   //   return `${a.name}`
                //   // },
                // },
                barWidth: '20px'
                // backgroundStyle: {
                //   color: "rgba(207, 207, 207, 1)",
                // },
              })
              this.option1.series[index].name = item.name[0]
              this.option1.series[index].data = item.value
            })
            this.myChart1.setOption(this.option1, true)
            // this.option1Data = res.data[1]
            // this.option1XData = res.data[0]
            // this.optionYData = res.data[2]
            // this.option1.yAxis.data = this.optionYData
            // this.option1.series[0].name = this.option1XData
            // this.option1.series[0].data = this.option1Data
            // this.myChart1.setOption(this.option1, true)
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    // 化工行业万元能耗产业排名选项
    changeIndustryRank () {
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovIndustryConsums`, {
          industrySumType: this.industryRankValue,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            if (res.data.length > 0) {
              this.option3Data = res.data[1]
              this.option3XData = res.data[0]
              this.option3.yAxis.data = this.option3XData
              this.option3.series[0].data = this.option3Data
              this.myChart3.setOption(this.option3, true)
              this.showData = 0
            } else {
              this.option3Data = res.data[1]
              this.option3XData = res.data[0]
              this.option3.yAxis.data = this.option3XData
              this.option3.series[0].data = this.option3Data
              this.myChart3.setOption(this.option3, true)
              this.showData = 1
            }
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    // 园区能源用能额度分析选项
    changeQuotaAnalysis () {
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovEnergyQuotas`, {
          region: this.quotaAnalysisValue
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            let quotasArr = []
            res.data.forEach((item) => {
              quotasArr.push({
                name: item.parkName,
                amount: item.usedAmount,
                proportion: item.usedProportion + '%'
              })
            })
            this.tableData1 = quotasArr
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    // 行业主要产品单位产品能耗选项
    changeEnergyConsumption () {
      let industry = this.energyConsumptionValue[(this.energyConsumptionValue.length - 1)]
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovProductConsums`, {
          industry: industry,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            let productArr = []
            res.data.forEach((item) => {
              productArr.push({
                name: item.industriesName,
                consumption: item.energyValue,
                nationalStandard: item.nationalStandard,
                IndustryStandard: item.industryStandard
              })
            })
            this.tableData2 = productArr
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    changeMedium (medium) {
      let mediumParam = ''
      let arr = medium.split(' ')
      let mediumName = arr[0]
      this.option2Data.forEach((item) => {
        if (item.name === mediumName) {
          mediumParam = item.medium
        }
      })
      this.$http
        .post(`/home/chemical/energyConsumption/getEmsGovMonthConsums`, {
          medium: mediumParam,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            let monthConsums = {
              key: ''
            }
            if (res.data.length > 0) {
              monthConsums = res.data[0]
            }
            this.option4.series.forEach((item) => {
              if (item.name === monthConsums.key) {
                item.data = monthConsums.value.map(item => {
                  return item.energyValue
                })
              } else {
                item.data = []
              }
            })
            this.myChart4.setOption(this.option4, true)
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    changeMediumAll () {
      let industry = this.energyConsumptionValue[(this.energyConsumptionValue.length - 1)]
      this.$http
        .post(`/home/chemical/energyConsumption/getEnergyConsumptionYearsOld`, {
          region: this.quotaAnalysisValue,
          areaSumType: this.parkRankValue,
          industrySumType: this.industryRankValue,
          industry: industry,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.option4.series = []
            let monthEnergyType = []
            this.option2Data.forEach((yearEnergy) => {
              let series = {
                name: yearEnergy.name,
                type: 'bar',
                stack: 'total',
                emphasis: {
                  focus: 'series'
                },
                data: []
              }
              res.data.emsGovMonthConsumsOld.forEach((monthEnergy) => {
                if (yearEnergy.name === monthEnergy.key) {
                  series.data = monthEnergy.value.map(item => {
                    return item.energyValue
                  })
                  monthEnergyType.push(monthEnergy.key)
                }
              })
              this.option4.series.push(series)
            })
            res.data.emsGovMonthConsumsOld.forEach((monthEnergy) => {
              if (monthEnergyType.indexOf(monthEnergy.key) === -1) {
                let energyValue = monthEnergy.value.map(item => {
                  return item.energyValue
                })
                let series = {
                  name: monthEnergy.key,
                  type: 'bar',
                  stack: 'total',
                  emphasis: {
                    focus: 'series'
                  },
                  data: energyValue
                }
                this.option4.series.push(series)
              }
            })
            this.bottomTwoData = 0
            this.myChart4.setOption(this.option4, true)
          } else {
            this.$message.warning(res.msg)
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  // background-color: #EDF4FF;
  width: 100%;
  padding: 20px 20px 40px 20px;
}
.top {
  width: 100%;
  display: flex;
  .top-first {
    // width: 380px;
    width: 32.4%;
    height: 446px;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    .top-title {
      height: 58px;
      line-height: 58px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    .top-sel {
      height: 41px;
      margin-top: 9px;
    }
  }
  .top-two {
    // width: 360px;
    width: 32.4%;
    height: 446px;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    // margin-left: 20px;
    // margin-right: 20px;
    margin-left: 1.4%;
    margin-right: 1.4%;
    border-radius: 4px;
    .top-title {
      height: 58px;
      line-height: 58px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    .top-sel {
      height: 41px;
      margin-top: 9px;
    }
  }
}
.bottom {
  width: 100%;
  display: flex;
  margin-top: 20px;
  .bottom-first {
    // width: 380px;
    width: 32.4%;
    height: 499px;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    .bottom-title {
      height: 58px;
      line-height: 58px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    .bottom-sel {
      width: 100%;
      height: 35px;
      display: flex;
      justify-items: center;
      margin-bottom: 2px;
    }
    .bottom-tab {
      width: 100%;
      padding: 0px 20px 10px 20px;
    }
  }
  .bottom-two {
    // width: 360px;
    width: 32.4%;
    height: 499px;
    margin: 0 1.4%;
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    .bottom-title-two {
      height: 58px;
      line-height: 58px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  }
}
// .select {
//   margin-left: 20px;
//   width: 340px;
//   height: 34px;
// }
.el-cascader {
  margin-left: 20px;
  margin-right: 20px;
  width: 100%;
  height: 34px;
}
.select1 {
  // margin-left: 20px;
  width: 95px;
  height: 34px;
}
/deep/ .el-input__inner {
  padding: 0 10px;
  height: 34px;
  line-height: 34px;
}
/deep/ .el-input__icon {
  line-height: 34px;
}
// .list {
//   max-height: 150px;
//   overflow-x: hidden;
// }
// /deep/ .el-table__body-wrapper{
//   width: 110%;
// }
// /deep/ .el-scrollbar__wrap {
//   overflow-x: hidden;
// }
// /deep/ .el-table__empty-block {
//   display: none;
// }
</style>
